<template>
    <div>
        <div class="div">haha<span>
        </span></div>
        <span class="icon iconfont required">&#xe69f;</span>
        <div class="div">haha</div>
        <group :title="value[0] + ' ' + value[1] + ':' + value[2]">
            <datetime-range :title="title"
                            start-date="2017-01-01"
                            end-date="2017-02-02"
                            v-model="value"
                            @on-change="onChange"></datetime-range>
        </group>
        <uploader :show-header="false"
                  :autoUpload="true"
                  :uploadUrl="uploadUrl"
                  size="small"
                  @preview="previewMethod"
                  @add-image="addImageMethod"
                  @remove-image="removeImageMethod"></uploader>
    </div>
</template>

<script>
import { Group, DatetimeRange } from 'vux'

export default {
    components: {
        Group,
        DatetimeRange
    },
    methods: {
        onChange (val) {
            console.log('change', val)
        },
        previewMethod (val) {
            console.log(val)
        },
        addImageMethod (val) {
            console.log(val)
        },
        removeImageMethod (val) {
            console.log(val)
        }
    },
    data () {
        return {
            title: '起始时间',
            value: ['2017-01-15', '03', '05'],
            uploadUrl: '/api/admin/uploadapiv2/uploadpics'
        }
    }
}
</script>
<style scoped>
.div {
    width: 375px;
    height: 40px;
    background: rgba(0, 0, 0, 0.2);
}
.required{
    color: red;
}
</style>
